<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>注册中心</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">


    <link rel="stylesheet" href="../../vendor/bootstrap/css/bootstrap.css">
    <link href="//cdn.bootcss.com/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../vendor/bootstrap/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../../vendor/admin-lte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="../../vendor/admin-lte/css/skins/skin-blue.min.css">

    <script src="//cdn.bootcss.com/moment.js/2.14.1/moment.min.js"></script>
    <script src="//cdn.bootcss.com/moment.js/2.14.1/locale/zh-cn.js"></script>
    <script src="../../vendor/jquery/jQuery-2.2.0.min.js"></script>
    <script src="../../vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
    <script src="../../vendor/bootstrap/js/daterangepicker.js"></script>
    <script src="../../address-resolver.js"></script>
    <script src="../../vendor/vue/vue.min.js"></script>
    <script src="../../common.js"></script>
</head>

<body>
<div id="app" class="container-fluid">
        <div class="form-group">
            <span>账号：</span>
            <input type="text" class="form-control" placeholder="请输入账号" v-model="username" aria-describedby="basic-addon1" value="{{username}}"><br><br>
        </div>

        <div class="form-group">
            <span>密码：</span>
            <input type="text" class="form-control" placeholder="请输入密码" v-model="password" aria-describedby="basic-addon1" value="{{password}}"> <br><br>
        </div>

        <div class="form-group">
            <span>邮箱：</span>
            <input type="text" class="form-control" placeholder="请输入邮箱" v-model="email" aria-describedby="basic-addon1" value="{{email}}"><br><br>
        </div>

        <div class="form-group">
            <span>电话：</span>
            <input type="text" class="form-control" placeholder="请输入电话" v-model="tel" aria-describedby="basic-addon1" value="{{tel}}"><br><br>
        </div>

        <div class="form-group">
            <span>备注信息：</span>
            <input type="text" class="form-control" placeholder="请输入备注" v-model="info" aria-describedby="basic-addon1" value="{{info}}"><br><br>
        </div>

        <button type="submit" @click="submit" class="{{brand_button?'btn btn-default':'btn btn-default disabled' }}">提交</button>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;
        <button type="submit" @click="cancel" class="{{brand_button?'btn btn-default':'btn btn-default disabled' }}">取消</button>

</div>

<script>//首先使用一个闭包,防止污染全局对象


(function () {

    var Request = GetRequest();

    //定义页面的mvvm对象,用法参考 vuejs框架
    var vm = new Vue(
        {
            el: "#app",
            data: {
                username:'',//账号
                password:'',//密码
                email:'',//邮箱
                tel:'',//电话
                info:''//备注信息
            },
            created: function () {

            },
            watch: {

            },
            methods: {
                submit:function(){
                    var data={
                        username:this.username,
                        password:this.password,
                        email:this.email,
                        tel:this.tel,
                        info:this.info
                    };

                    getAddUser(data,function () {
                        window.location.href="../privilege/user.html";
                    })
                },
                cancel:function () {
                    window.location.href="../privilege/user.html";
                }

            }

        });

   function getAddUser(param, cp){
        $.post("/user/add", param, cp);
   }


    $('input[name="daterange"]').daterangepicker({
        dateLimit : true,
        linkedCalendars: true,
        showRangesDatePicker: 1,
        showCustomDateLabel: true,
    }, function () {

    });

})();
</script>
</body>

</html>